<template>
    <div class="appointment-notice clearfix positionRe">
       <div class="appointment-notice-switch fl postionAb">

       </div>
       <div class="appointment-notice-caption fl postionAb">
           距离直播时间还有:<span>{{days}}天{{hours}}小时{{minutes}}分{{seconds}}秒</span>
       </div>
       <div class="appointment-notice-advise fl postionAb" @click="pickLiving">
           预约通知
       </div>
    </div>
</template>
<script>
export default {
    data() {
      return{
        hours: "",
        minutes: "",
        seconds: "",
        days: "",
        timeObj: "", //倒计时赋值对象
        gettimer:''
      }
    },
    mounted(){
       
    },
    computed:{
        countdown(){
            this.gettimer = this.$store.state.getTimer;
            return this.gettimer;
        }
    },
    watch:{
         countdown(){
            setInterval(()=>{
                this.timer(this.gettimer);
            },1000)
         }
    },
    methods:{
        pickLiving(){
            this.$emit('handlePick');
        },
        /*直播倒计时*/
        checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        },
        timer(t){
            this.$store.state.timeRunShow = true;
            var willtime = t.replace(/-/g, "/");
            var ts = new Date(willtime) - new Date(); //计算剩余的毫秒数
            var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
            var hh = parseInt((ts / 1000 / 60 / 60) % 24, 10); //计算剩余的小时数
            var mm = parseInt((ts / 1000 / 60) % 60, 10); //计算剩余的分钟数
            var ss = parseInt((ts / 1000) % 60, 10); //计算剩余的秒数
            if (ts > 0) {
                this.days = this.checkTime(dd);
                this.hours = this.checkTime(hh);
                this.minutes = this.checkTime(mm);
                this.seconds = this.checkTime(ss);
            } else {
                this.$store.state.timeRunShow = false;
                clearInterval(this.timeObj);
            }
        },
    }
}
</script>
<style scoped>
.appointment-notice{
    display: flex;
    padding: 10px 20px;
    background: rgba(0, 0, 0, .8);
    height: 100%;
}
.appointment-notice-switch{
    width: 20px;
    height: 20px;
    background:red;
}
.appointment-notice-caption{
    font-size: 14px;
    color:#fff;
    flex-grow: 1;
    line-height: 2;
}
.appointment-notice-advise{
    cursor: pointer;
    width: 60px;
    height: 30px;
    border-radius: 3px;
    background: #00a9ff;
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 30px;
}
</style>